<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>用户信息</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div id="view"></div>
</body>
<script th:src="@{/static/layui/layui.all.js}"></script>

<script id="user_view" type="text/html">
    <form class="layui-form" th:action="@{/user/saveUserInfo}" method="post" style="margin-top: 15px">
        <input name="id" value="{{d.id}}" hidden="hidden"/>

        <div class="layui-form-item">
            <label class="layui-form-label">

            </label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="test1">上传头像</button>
                <input id="photoId" name="photoId" value="{{d.photoId}}" hidden="hidden"/>
                <img class="layui-upload-img" style="height: 150px;height: 150px" id="photo">
                <p id="demoText"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" value="{{d.userName}}" autocomplete="off" class="layui-input"/>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" disabled title="男" {{d.sex == 1 ? "checked":""}}/>
                <input type="radio" name="sex" value="0" disabled title="女" {{d.sex == 0 ? "checked":""}}/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="text" name="age" value="{{d.age}}" disabled autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Email</label>
            <div class="layui-input-inline">
                <input type="text" name="email" value="{{d.email}}" disabled autocomplete="off" class="layui-input"/>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" value="{{d.phone}}"  disabled autocomplete="off" class="layui-input"/>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">启用</label>
            <div class="layui-input-block">
                <input type="checkbox" name="enable" disabled lay-skin="switch" {{d.enable ? "checked":""}} />
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="lay-submit" lay-filter="formUserInfo">保存</button>
            </div>
        </div>

    </form>

</script>
<script  th:inline="javascript">

    var ctxPath = /*[[@{/}]]*/ '';

    layui.use(['laytpl','form','upload'], function(){
        var laytpl = layui.laytpl,upload = layui.upload,form = layui.form,$ = layui.jquery;

        var data =  /*[[${user}]]*/ '';
        var getTpl = user_view.innerHTML
            ,view = document.getElementById('view');

        laytpl(getTpl).render(data, function(html) {
            view.innerHTML = html;
        });

        form.render(); //更新全部

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: ctxPath + 'file/upload',
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    //图片链接（base64）
                    $('#photo').attr('src', result);
                });
            },
            done: function(res){
                //上传成功
                if(res.status = 1){
                    $("#photoId").val(res.data.id);
                    return layer.msg('已完成上传');
                }else {
                    //如果上传失败
                    return layer.msg('上传失败');
                }

            }
        });
        //监听提交
        form.on('submit(formUserInfo)', function(data){
            $.post({
                url: ctxPath + "user/saveUserInfo",
                data: data.field,
                success: function (data) {
                    if(data.status){
                        layer.msg("保存成功");
                    }else {
                        layer.msg("保存失败");
                    }
                }
            });
            return false;
        });

    });

</script>
</html>